<template>
	<view class="content">
		<navBar title="妙街快抢" :change="scrollChange" ref="navHeader"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/quicklygrab_bg.png" mode="widthFix" />
		</view>
		<view class="act-rule" @click="goGuize">规则</view>
		<view class="container">
			<view class="list flex" v-for="(item,index) in GoodsList" :key="index">
				<view class="list-img flex justify-center align-center">
					<image :src="item.pic" mode="widthFix" />
				</view>
				<view class="list-info" @click="navToDetailPage1(item.id,item.sale)">
					<view class="info-title text-cut">{{item.name}}</view>
					<view class="progress">
						<view class="cu-progress round xs">
							<!-- <view class="bg-red" :style="'width:'+(item.stock-item.sale)/item.stock+'%'"></view> stock现有库存  sale已经卖掉的   item.stock + item.sale总库存  1/100--> 
							<view class="bg-red" :style="'width:'+item.sale/(item.stock + item.sale) * 100+'%'"></view>
						</view>
						<view class="progress-text text-right">库存：{{ item.stock}}件</view>
					</view>
					<view class="info-price flex align-center">
						<view class="tag flex">
							<view class="tag-left">快抢价</view>
							<view class="tag-right"></view>
						</view>
						<view class="price"><text>￥</text>{{ item.price }}</view>
					</view>
					<view class="yuan-price text-line">市场价：￥{{ item.originalPrice }}</view>
					<view class="btn">补贴{{ item.rewardPrice1 }}元</view>
				</view>
			</view>
			<loadMore :status="loadingType"></loadMore>
		</view>
	
	<!-- 客服弹出框 -->
	<view class="weChat_popups" v-if="watchShow == 1">
		<view class="popups_bg" @click="watchShow = 0"></view>
		<view class="popups_body">
			<view class="popups_no" @click="watchShow = 0">
				<image src="/static/icon_close.png" mode=""></image>
			</view>
			<view class="popups_content">
				<view class="popups_title">快抢规则</view>
				<view class="popups_phone">
					品牌联盟——价格更优</br>
					1·妙街快枪板块联合四大云仓品牌联盟，供应链直供价格最低，
					购买商品即有购物津贴到账，够一元可以提现，也可以购买其他美物</br>
					2·24小时随时购买
					设置砍价人数</br>
					3·购物无忧，收货后不喜欢可以联系客服退货</br>
					4·全场包邮</br>
					5·48小时内发货，个别预售除外</br>
					最终解释权归妙街细品所有
				</view>
				<!-- <view class="popups_btn" @click="setCopyWatch(watgchNum)"></view> -->
			</view>
		</view>
	</view>
	
	</view>
</template>

<script>
	import Api from "@/common/api";
	import loadMore from '@/components/load-more';
	import navBar from "@/components/header-nav";
	export default {
		components: {
			loadMore,
			navBar
		},
		data() {
			return {
				watchShow:0,
				headerHeight: 0,
				scrollChange: false,
				GoodsList: [],
				loadingType: 'loading', //加载更多状态
				currentPage: 1,
				pageTotal: 0
			};
		},
		//分页
		onReachBottom() {
			if (this.pageTotal > this.currentPage) {
				this.currentPage++
				this.loadData()
			} else {
				this.loadingType = 'noMore'
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			this.loadData()
		},
		onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
		},
		onPageScroll(e) {
			if (e.scrollTop > this.headerHeight) {
				this.scrollChange = true
			} else {
				this.scrollChange = false
			}
		},
		methods: {
			goGuize(){
				this.watchShow = 1;
			},
			//获取快抢商品列表
			async loadData() {
				let params = {
					isQuick: 2,
					pageNum: this.currentPage,
				}
				let res = await Api.apiCall('', 'single/pms/goods/list', params, true);
				this.GoodsList = [...this.GoodsList, ...res.records];
				this.pageTotal = res.pages
				if (res.pages == this.currentPage) {
					this.loadingType = 'noMore'
				}
			},
			//跳转至商品详情页
			navToDetailPage1(id, saleId) {
				uni.navigateTo({
					url: '../../pagesA/product/product?id=' + id
				});
			},
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		min-height: 100vh;
		position: relative;

		.header-bg {
			width: 100%;
			font-size: 0;

			image {
				width: 100%;
			}
		}

		.container {
			background: linear-gradient(to bottom, #FF6464, #fff);
			padding: 20upx 20upx 90upx;

			.list {
				padding: 20upx;
				background: #fff;
				margin-bottom: 20upx;
				border-radius: 20upx;
				box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.06);

				.list-img {
					width: 280upx;
					height: 280upx;
					border-radius: 14upx;
					border: 1px solid rgba(245, 245, 245, 1);

					image {
						width: 100%;
					}
				}

				.list-info {
					width: calc(100% - 300upx);
					margin-left: 20upx;

					.info-title {
						max-width: 100%;
						font-size: 32upx;
						color: #333;
						font-weight: bold;
					}

					.progress {
						padding-bottom: 10upx;

						.progress-text {
							font-size: 20upx;
							color: #666;
							padding-top: 6upx;
						}
					}

					.info-price {
						.tag {
							.tag-left {
								height: 33upx;
								font-size: 20upx;
								line-height: 36upx;
								padding-left: 10upx;
								background: #FF9D35;
								border-radius: 6upx 0px 0px 6upx;
								color: #fff;
							}

							.tag-right {
								width: 0;
								height: 0;
								border-right: 20upx solid transparent;
								border-top: 32upx solid #FF9D35;
							}
						}

						.price {
							font-size: 48upx;
							color: #F94242;

							text {
								font-size: 26upx;
							}
						}
					}

					.yuan-price {
						font-size: 26upx;
						color: #999;
					}

					.bargain-price {
						display: inline-block;
						margin-top: 20upx;
						padding: 6upx 8upx;
						border-radius: 6upx;
						background: linear-gradient(to right, #FF7777, #FF1D1D);
						font-size: 24upx;
						color: #fff;
					}

					.btn {
						background: linear-gradient(to right, #FF7777, #FF1D1D);
						box-shadow: 0px 3upx 10upx 0px rgba(248, 141, 0, 0.64);
						border-radius: 30upx;
						width: 200upx;
						height: 60upx;
						color: #fff;
						line-height: 60upx;
						font-size: 28upx;
						text-align: center;
						margin-top: 16upx;
						margin-left: auto;
					}
				}
			}

		}

	}

	// 客服弹出框
	.weChat_popups {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	
		.popups_bg {
			z-index: 1000;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #000;
			opacity: 0.3;
		}
	
		.popups_body {
			z-index: 1001;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 600upx;
			height: 760upx;
			line-height: 50upx;
			border-radius: 30upx;
			background-color: #FFFFFF;
	
			.popups_no {
				position: absolute;
				right: 20upx;
				top: 20upx;
				width: 32upx;
				height: 32upx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				image {
					width: 32upx;
					height: 32upx;
				}
			}
	
			.popups_content {
				width: 100%;
				padding: 0 30upx;
				padding-top: 30upx;
				padding-bottom: 30upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.popups_title {
					margin-top: 30upx;
					font-size: 36upx;
					text-align: center;
				}
	
				.popups_phone {
					font-size: 30upx;
					// text-align: center;
					font-weight: 500;
				}
	
				.popups_btn {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					background-color: #AD1E22;
					font-size: 36upx;
					border-radius: 44upx;
					line-height: 88upx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>
